defmodule EliPhxPlayWeb.Components.DashboardRight.RecentChatsComponent do
  use EliPhxPlayWeb, :live_component

  def render(assigns) do
    ~H"""
    <div class="h-full bg-white flex flex-col">

      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <h1 class="text-2xl font-bold text-gray-900">最近聊天</h1>
          <%!-- <%= if @data && length(@data) > 0 do %>
            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-full">
              <%= length(@data) %> 个对话
            </span>
          <% end %> --%>
        </div>

        <!-- 新建聊天按钮 -->
        <div class="flex items-center gap-3">
          <button
            phx-target={@myself}
            phx-click="new_chat"
            class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-200 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 shadow-sm hover:shadow"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            新建聊天
          </button>
        </div>
      </div>


      <!-- 聊天列表 - 可滚动区域 -->
      <div class="flex-1 overflow-y-auto">
        <%= if length(@recent_chats) > 0 do %>
          <div class="p-6 text-center text-gray-500">
            聊天列表功能开发中...
          </div>
        <% else %>
          <div class="flex flex-col items-center justify-center h-full text-gray-500 p-8">
            <svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            <p class="text-lg mb-2 text-gray-600">还没有聊天记录</p>
            <p class="text-sm text-gray-400">开始与朋友聊天吧！</p>
          </div>
        <% end %>
      </div>
    </div>
    """
  end
end
